<template>
  <div class="home-header">
    <div class="header-title">
      <div class="center reset-center">
        <div class="left">
          <span>中国铁路郑州局集团有限公司工务部</span>
        </div>
        <div class="right">
            <a>登录</a>
            <span></span>
            <a>注册</a>
            <a>无障碍浏览</a>
        </div>
        <!-- <img src="@/assets/logo.png" alt=""> -->
      </div>
    </div>
    <div class="header-contain">
      <div class="center reset-center">
        <div class="logo">
          <img src="../../assets/image/logo.png" alt="">
        </div>
        <div class="search">
          <form action="">
            <input type="text" value="请输入搜索内容">
          </form>
            <button>搜索</button>
        </div>
      </div>
    </div>
    <div class="header-nav">
      <div class="center reset-center">
        <ul>
          <li
          class="nav_li"
          >
            <router-link to="/home">
              首页
            </router-link>
          </li>
          <li
          class="nav_li"
          v-for="item in navList"
          :key="item.id"
          >
            <!-- <span v-if="item.id === 2">111</span> -->
            <!-- 系统应用下拉列表 -->
            <div
              class="system"
              v-if="item.id === 2">
              <ol>
                <li class="sys_li"
                  v-for="item in sysList"
                  :key="item.id"
                >
                  {{item.name}}
                </li>
              </ol>
            </div>
            <router-link :to="item.link">
              {{item.name}}
            </router-link>
            <!-- <a :href="item.link" target="_blank">{{item.name}}</a> -->
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getNav, getSysList } from '@/api/header'
export default {
  name: 'HomeHeader',
  data () {
    return {
      navList: [],
      sysList: {}
    }
  },
  methods: {
  },
  async created () {
    // 获取导航栏信息
    const res = await getNav()
    this.navList = res.data.data
    // 获取系统应用信息
    this.sysList = (await getSysList()).data.data
    console.log((await getSysList()).data.data)
  }
}
</script>

<style lang="scss" scoped src='./home-header.scss'>
</style>
